<template>
  <div class="container">
    <!-- 轮播图 -->
    <div
      class="index-swiper"
      v-swiper:indexSwiper="indexSwiperOption"
      v-if="bannerData.length != 0"
    >
      <div class="swiper-wrapper">
        <div
          class="swiper-slide"
          v-for="(item, index) in bannerData"
          :key="index"
        >
          <div class="swiper-box">
            <img
              :src="$store.state.isMobile ? item.wap_thumb : item.thumb"
              alt=""
              class="banner-swiper"
              v-if="item.thumb"
            />
            <video
              width="100%"
              height="100%"
              controls="false"
              muted
              loop
              autoplay
              :src="item.video"
              v-if="item.video"
            ></video>
            <div class="text-box animated fadeInUp" v-show="index == aniIndex">
              <p
                class="info"
                :style="{
                  color: item.desc_color,
                  fontSize: item.desc_size + 'rem',
                }"
              >
                {{ item.desc }}
              </p>
              <p
                class="title"
                :style="{
                  color: item.title_color,
                  fontSize: item.title_size + 'rem',
                }"
              >
                {{ item.title }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>
    <component
      :is="tabPage"
      :aboutBrandData="AboutBrandData"
      :aboutEventData="AboutEventData"
      :aboutTechnologyData="AboutTechnologyData"
      :newsData="NewsData"
      :contactData="ContactData"
      @page="getPage"
    />
  </div>
</template>

<script>
import brandProfile from "~/components/aboutUs/brandProfile.vue";
import coreTechnology from "~/components/aboutUs/coreTechnology.vue";
import newsInformation from "~/components/aboutUs/newsInformation.vue";
import contactUs from "~/components/aboutUs/contactUs.vue";

export default {
  components: { brandProfile, coreTechnology, newsInformation, contactUs },
  data() {
    return {
      indexSwiperOption: {
        //顶部轮播图
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          type: "bullets",
        },
        loop: false,
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        slidesPerView: 1,
        spaceBetween: 0,
        speed: 800,
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.realIndex, "this");
            that.aniIndex =
              this.activeIndex > that.bannerData.length ? 0 : this.realIndex;
          },
        },
      },
      aniIndex: 0,
      tabPage: "brandProfile",
    };
  },
  async asyncData({ $indexApi, query }) {
    let type;
    switch (query.tabs) {
      case "0":
        type = "about";
        break;
      case "1":
        type = "technology";
        break;
      case "2":
        type = "news";
        break;
      case "3":
        type = "contact";
        break;
    }
    const bannerData = await $indexApi.getBannerData({ position: type });
    const aboutBrandData = await $indexApi.getAboutBrandData();
    const aboutEventData = await $indexApi.getAboutEventData();
    const aboutTechnologyData = await $indexApi.getAboutTechnologyData();
    const newsData = await $indexApi.getNewsIndex({ page: 1 });
    const contactData = await $indexApi.getContact();

    // console.log(bannerData);

    return {
      bannerData: bannerData.data,
      AboutBrandData: aboutBrandData.data,
      AboutEventData: aboutEventData.data,
      AboutTechnologyData: aboutTechnologyData.data,
      NewsData: newsData.data,
      ContactData: contactData.data,
    };
  },
  watch: {
    $route(res) {
      // console.log(res.query.tabs);
      switch (res.query.tabs) {
        case "0":
          this.tabPage = "brandProfile";
          break;
        case "1":
          this.tabPage = "coreTechnology";
          break;
        case "2":
          this.tabPage = "newsInformation";
          break;
        case "3":
          this.tabPage = "contactUs";
          break;
      }
      this.changebanner(res.query.tabs);
    },
  },
  mounted() {
    switch (this.$route.query.tabs) {
      case "0":
        this.tabPage = "brandProfile";
        break;
      case "1":
        this.tabPage = "coreTechnology";
        break;
      case "2":
        this.tabPage = "newsInformation";
        break;
      case "3":
        this.tabPage = "contactUs";
        break;
    }
  },
  methods: {
    async getPage(e) {
      const newsData = await this.$indexApi.getNewsIndex({ page: e });
      this.NewsData = newsData.data;
    },
    async changebanner(e) {
      let type;
      switch (e) {
        case "0":
          type = "about";
          break;
        case "1":
          type = "technology";
          break;
        case "2":
          type = "news";
          break;
        case "3":
          type = "contact";
          break;
      }
      const bannerData = await this.$indexApi.getBannerData({ position: type });
      this.bannerData = bannerData.data;
    },
  },
};
</script>

<style lang="less" scoped>
@media (min-width: 900px) {
  .index-swiper {
    width: 100%;

    :deep(.swiper-pagination-bullet) {
      width: 120rem;
      height: 3rem;
      border-radius: 2rem;
      background: #848e94;
      margin: 0 49rem;
    }
    :deep(.swiper-pagination-bullet-active) {
      background: #fff;
    }
    .swiper-pagination {
      width: 100%;
      bottom: 45rem;
    }

    .swiper-box {
      width: 100%;
      height: 560rem;
      overflow: hidden;
      position: relative;

      .banner-swiper {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .text-box {
        width: 100%;
        position: absolute;
        text-align: center;
        top: 40%;
        .info {
          font-size: 30rem;
          font-family: Source Han Sans CN;
          font-weight: 300;
          color: #333333;
          margin: 0;
        }
        .title {
          font-size: 60rem;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #333333;
          margin: 0;
          margin-top: 30rem;
        }
      }
    }
  }
}
@media (max-width: 900px) {
  .index-swiper {
    :deep(.swiper-pagination-bullet) {
      width: 21px;
      height: 1px;
      background: #606568;
      border-radius: 0px;
      margin: 0 18px;
    }
    :deep(.swiper-pagination-bullet-active) {
      background: #fff;
    }
    .swiper-pagination {
      width: 100%;
      bottom: 20px;
    }

    .swiper-box {
      height: auto;

      .banner-swiper {
        width: 100%;
        height: 550px;
        object-fit: cover;
      }
      .text-box {
        position: absolute;
        top: 20%;
        left: 0;
        right: 0;
        margin: 0 auto;
        text-align: center;
        .info {
          font-size: 26px !important;
        }
        .title {
          font-size: 21px !important;
          margin: 15px 0;
        }
      }
    }
  }
}
</style>
